<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/vue2.js"></script>
    <link rel="stylesheet" href="/code/css/anli.css" />
    <link rel="stylesheet" href="/code/css/animate.css" />
  </head>
  <body>
    <div id="app">
      <div class="add">
        编号:<input
          type="text"
          v-model="count.id"
          v-myfocus
          v-addcolor='"red"'
        />
        品牌名称:<input type="text" v-model="count.name" />
        <input @click="add" type="button" value="添加" />
      </div>
      <div class="add">
        品牌名称:
        <input v-model="serchvalue" type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item,index) in searchList" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.time | timer }}</td>
              <td>
                <a @click="delet(index)" href="javascript:void(0)">删除</a>
              </td>
            </tr>
              <tr><td colspan="5" v-if='list.length==0'>兄弟没得删了</td></tr>
          </tbody>
        </table>
        <transition
        name=""
        mode=""
        enter-active-class="animated zoomIn"
        enter-active-class="animated zoomOut"
      >
        <div class="model" v-show='!isShow'>
          <span @click='close'>关闭</span>
          <input
           @click='sure'
            class="btn1"
            type="button"
            value="确认"
          />
          <input @click='cancel' class="btn2" type="button" value="取消" />
        </div>
      </transition>
      </div>
    </div>

    <script>
      //  过滤器生成一个当前时间
      Vue.filter("timer", function(time, spl) {
        var date = new Date(time);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      });
      //输入框自动聚焦Vue.directive('指令id',{inserted:function(el,binding){}})
      Vue.directive("myfocus", {
        inserted(el, binding) {
          el.focus();
        }
      });
      Vue.directive("addcolor", {
        inserted(el, binding) {
          el.style.color = binding.value;
        }
      });
      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            { id: "1", name: "龙转风", time: new Date() },
            { id: "2", name: "晴天", time: new Date() },
            { id: "3", name: "明明就", time: new Date() },
            { id: "4", name: "搁浅", time: new Date() },
            { id: "5", name: "简单爱", time: new Date() }
          ],
          count: {
            id: "",
            name: "",
            time: new Date()
          },
          serchvalue: "",
          color: "red",
          isShow:true,
          clickId:''
        },
        methods: {
          add() {
            this.list.push({ ...this.count });
            this.count = { id: "", name: "", time: new Date() };
          },
          // findIndex自带一个回调函数,
          delet(index) {
            // var id;
            // id = index
            // this.list.splice(id, 1);
            this.list.clickId=index
            this.isShow=false
            // var index = this.list.findIndex(item => {
            //   return (id = item.id);
            // });
            // this.list.splice(index, 1);
          },
          sure(id){
            this.list.splice( this.list.clickId,1)
             this.isShow=true
          },
          close(){
            this.isShow=true
          },
          cancel(){
            this.isShow=true
          }
        },
        // filter相当于一个遍历,遍历所需要遍历的元素
        computed:{
          searchList(){
           return this.list.filter(item=>item.name.indexOf(this.serchvalue)!=-1)
           console.log(list)
           console.log(item)
          }
        }

        
        
      });
      // this.list.array.forEach(element => {

      // });
    </script>
  </body>
</html>
